<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<title>Select 联动效果</title>
</head>
<body>
	<div id="selectList">
		省: <select id="province">
			<option>请选择</option>
		</select> 市: <select id="city">
			<option>请选择</option>
		</select> 县: <select id="district">
			<option>请选择</option>
		</select>
	</div>
	<script type="text/javascript">
		$(function() {
			//通过AJAX获取省级数据
			var province = function() {
				$.getJSON("/select/province", function(data) {
					var temp_html = "";
					$.each(data, function(i, province) {
						temp_html += "<option value='"+province.id+"'>"
								+ province.name + "</option>"
					});
					$("#province").html(temp_html);
				});
			};
			
			//通过AJAX获取市级数据
			var city = function() {
				//注意URL传值
				$.getJSON("/select/city?provinceid=" + $("#province").val(),
						function(data) {
							var temp_html = "";
							$.each(data, function(i, province) {
								temp_html += "<option value='"+province.id+"'>"
										+ province.name + "</option>"
							});
							$("#city").html(temp_html);
						});
			};
			//注册选中改变事件
			$("#province").change(function() {
				city();
			});
			//初始化省级的数据
			province();
		});
	</script>
</body>
</html>